<template>
	<view>
		<view class="titleBox d-flex flex-d aling-centen jfy-center textColor-white">
			<view>
				<text class="font-32">余额</text>
				<text class="font-24 ml-10">(元)</text>
			</view>
			<text style="font-size: 60rpx;" class="mt-30">{{userinfo.money}}</text>
			<navigator class="btn mt-30" url='/goodsPackage/Recharge/Recharge' hover-class="none">充值</navigator>
		</view>
		<view class="pg-30 duwre d-flex-yCenter">
			<text class="leftBor"></text>
			<text class="font-30 ml-20 font-w">余额明细</text>
		</view>
		<view class="mx-30 py-30 border-b d-flex-yCenter-sb" v-for="(item,index) in list" :key='index'>
			<view class="d-flex flex-d">
				<text class="font-30">{{item.remark}}</text>
				<text class="font-26 mt-10">{{$tool.time(item.addtime*1000)}}</text>
			</view>
			<text class="font-30">{{item.money}}</text>
		</view>
	</view>
</template>

<script>
	import {http_user_wallet_money_log} from '@/config/apiRouter.js'
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				list:[],
				page:1,
				laz_page:null
			}
		},
		computed:{
			...mapGetters(['userinfo'])
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(type){
				http_user_wallet_money_log({
					data:{
						page:this.page,
						limit:10
					}
				}).then(res=>{
					this.laz_page=res.data.last_page
					type?this.list=this.list.concat(res.data.data):this.list=res.data.data
				})
			}
		},
		onReachBottom() {
			if(this.page==this.laz_page || this.laz_page==0)return
			this.page++
			this.getList(true)
		}
	}
</script>

<style lang="scss">
	.titleBox{
		height: 360rpx;
		background: url(../../static/icon/commission_top.png) no-repeat;
		background-size: 100% 100%;
		.btn{
			width: 240rpx;
			line-height: 60rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 30rpx;
			color: #000;
		}
	}
	.duwre{
		background: #F5F5F5;
		.leftBor{
			display: inline-block;
			width: 8rpx;
			height: 30rpx;
			background: #FF890B;
			border-radius: 4rpx;
		}
	}
</style>
